<script setup lang="ts">
  import { onMounted, ref, reactive, defineProps, } from 'vue';
  import storage from 'good-storage';
  import { useRouter } from 'vue-router';
  import API_BANNER from '@/apis/banner';
  import { useI18n } from 'vue-i18n'

  const props = defineProps(
    {
      show: {
        type: Boolean,
        default: false
      }
    }
  )
  const emit = defineEmits(['closeLan',])
  const { locale } = useI18n()
  let selectedValues = ref([])


  // 选择的值
  const openPop = () => {

    let select = storage.get('lang')
    console.log(select, 'a');
    let temp = []
    temp.push(select)
    selectedValues.value = temp
  }
  // 语言切换选择的值
  const columns = [
    { text: '中文', value: 'cn' },
    { text: 'English', value: 'en' },
  ];
  const confirmChange = async () => {
    // 语言赋值

    let res = await API_BANNER.indexChangeLang({
      lang: selectedValues.value[0]
    })
    if (res.code == 1) {
      locale.value = selectedValues.value[0]
      storage.set('lang', selectedValues.value[0])
      emit('closeLan', selectedValues.value[0])
    }

  }
  const cancelChange = () => {
    console.log(selectedValues.value[0]);

    emit('closeLan', selectedValues.value[0])
  }
  // 关闭弹出
  const closeIcon = () => {
    emit('closeLan', selectedValues.value[0])
  }
  const closeMask = () => {
    emit('closeLan', selectedValues.value[0])
  }
</script>

<template>
  <div>
    <van-popup v-model:show="props.show" round position="bottom" @click-close-icon="closeIcon" @opened="openPop"
      @click-overlay="closeMask">
      <van-picker :columns="columns" :confirm-button-text="$t('home.confirm')" :cancel-button-text="$t('home.cancel')"
        v-model="selectedValues" @confirm="confirmChange" @cancel="cancelChange" />
    </van-popup>
  </div>
</template>
<style lang="less" scoped>

</style>